<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html;charset=utf-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员面板</title>
    <link rel="stylesheet" href="../CSS/common.css">
    <link rel="stylesheet" href="../CSS/adminManage.css">
    <script src="../JS/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="container">

    <div class="header">
        <h1>管理员面板</h1>
    </div>
    <div class="sidebar">
        <ul>
            <li><span class="sideItem" data="view-users" onclick="loadUsers('view-users')">查看所有用户</span></li>
            <li><span class="sideItem" data="view-tickets" onclick="loadUsers('view-tickets')">查看所有的车票</span></li>
            <li><span class="sideItem" data="create-ticket" onclick="loadUsers('create-ticket')">创建车票</span></li>
            <li><span class="sideItem" data="additional-features" onclick="loadUsers('additional-features')">待开发功能</span></li>
            <li><a class="sideItem" href="/logout">注销</a></li>
        </ul>
    </div>
    <div class="main-content">
        <div id="view-users" class="card" style="display: none;">
            <h2>查看所有用户</h2>
            <table>
                <thead>
                <tr>
                    <th>ID</th>
                    <th>用户名</th>
                    <th>账户</th>
                    <th>邮箱</th>
                    <th>角色</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="users-list">
                <!-- 用户数据通过 AJAX 加载 -->
                </tbody>
            </table>
        </div>

        <div id="view-tickets" class="card" style="display: none;">
            <h2>查看所有的车票</h2>
            <table>
                <thead>
                <tr>
                    <th>ID</th>
                    <th>票名</th>
                    <th>起点</th>
                    <th>终点</th>
                    <th>途径站点</th>
                    <th>价格</th>
                    <th>座位数量</th>
                    <th>站点数量</th>
                    <th>等级</th>
                </tr>
                </thead>
                <tbody id="ticket-list">
                <!-- 用户数据通过 AJAX 加载 -->
                </tbody>
            </table>
        </div>

        <div id="create-ticket" class="card" style="display: none;">
            <div class="form-group">
                <label class="label" for="name">票名:</label>
                <input class="input" type="text" id="name" name="name" placeholder="输入票名" required>
            </div>
            <div class="form-group">
                <label class="label" for="passby">途径站点:</label>
                <input class="input" type="text" id="passby" name="pass" placeholder="输入途径站点（站点之间用 “ - ” 分隔）" required>
            </div>
            <div class="form-group">
                <label class="label" for="tktLv">等级:</label>
                <select class="input" name="tLevel" id="tktLv">
                    <c:forEach items="${levels}" var="level">
                        <option value="${level['tlvID']}"
                            ${level['tlvID']=="3"?"selected":""}>
                                ${level['levelName']}
                        </option>
                    </c:forEach>
                </select>
            </div>
            <div class="form-group">
                <label class="label" for="price">价格:</label>
                <input class="input" type="number" id="price" name="price" placeholder="输入价格" required>
            </div>
            <div class="form-group">
                <label class="label" for="num">数量:</label>
                <input class="input" type="number" id="num" name="num" placeholder="输入数量" required>
            </div>
            <button id="creatTicket">发售</button>
        </div>
        <div id="additional-features" class="card" style="display: none;">
            <h2>待开发功能</h2>
            <p>为未来功能留出空间。</p>
        </div>
    </div>
</div>
<script>
    let userid = <%=session.getAttribute("userid")%>;
</script>
<script type="application/javascript" src="../JS/adminManage.js"></script>
</body>
</html>

